---
title: Input
description: A text input field with variants and sizes.
component: Input
---

<LiveComponent language="tsx">
{`
  import { Input } from "@pipecat-ai/voice-ui-kit";

  <Input placeholder="Placeholder" />
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    variant: {
      description: "The visual style variant of the input",
      type: '"default" | "secondary" | "destructive" | "ghost"',
      required: false,
      default: '"default"',
    },
    size: {
      description: "The size of the input",
      type: '"sm" | "default" | "lg"',
      required: false,
      default: '"default"',
    },
    type: {
      description: "The input type",
      type: 'React.ComponentProps<"input">["type"]',
      required: false,
      default: '"text"',
    },
    className: {
      description: "Additional CSS classes to apply",
      type: "string",
      required: false,
      default: "undefined",
    },
  }}
/>

---

## Usage

### Variants

<LiveComponent language="tsx">
{`
  import { Input } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-4">
    <Input placeholder="Default" variant="default" />
    <Input placeholder="Secondary" variant="secondary" />
    <Input placeholder="Destructive" variant="destructive" />
    <Input placeholder="Ghost" variant="ghost" />
  </div>
`}
</LiveComponent>

### Sizes

<LiveComponent language="tsx">
{`
  import { Input } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-4">
    <Input placeholder="Small" size="sm" />
    <Input placeholder="Default" size="default" />
    <Input placeholder="Large" size="lg" />
  </div>
`}
</LiveComponent>


